<template>
  <input type="text" :value="str" @input="inputChange">
</template>

<script>
import { ref, watch } from 'vue'
export default {
  name: 'HInput',
  props: {
    modelValue: {
      type: String
    }
  },
  setup (props, { emit }) {
    const str = ref(props.modelValue)

    // 父传子
    watch(() => props.modelValue, () => {
      str.value = props.modelValue
    })

    // 子传父
    function inputChange (e) {
      emit('update:modelValue', e.target.value)
    }
    return {
      str,
      inputChange
    }
  }
}
</script>
